
layui.config({
    base: '/modules/'
}).use(['table', 'layer', 'global', 'admin'], function () {
    const table = layui.table
    const layer = layui.layer
    const $ = layui.$
    const assit = layui.admin
    const config = layui.global
    
    const modelId = getModelId()

    if (!modelId && modelId === '') {
        layer.warn('页面数据丢失，请返回后重试！')
        return
    }

    //第一个实例
    table.render({
        id: 'MD_TABLE',
        elem: '#model_detail_table',
        url: '/jsdata/model/detail/list?modelId=' + modelId, //数据接口
        // maxHeight: 466,
        text: {
            none: '什么数据也木有 ヾ§ ￣▽)ゞ',
        },
        // bugfix: 要让表格宽度自适应，需要 > 1 列不设置 width
        cols: [
            [ //表头
                { type: 'numbers', width: 50, rowspan: 2 },
                { title: '模型属性', colspan: 2, align: 'center' },
                { title: '表字段', colspan: 3, align: 'center' },
                { field: 'sortNo', title: '排序', width: 65, rowspan: 2, align: 'center', sort: true },
                { field: 'remark', title: '描述', rowspan: 2 },
                { title: '操作', fixed: 'right', width: 85, toolbar: '#optColumn', align: 'center', rowspan: 2 },
            ],
            [
                { field: 'propertyName', title: '名字', sort: true },
                { field: 'proType', title: '类型', width: 60 },
                { field: 'columnName', title: '名字' },
                { field: 'colType', title: '类型', width: 70 },
                { field: 'columnLength', title: '长度', width: 50 },
            ]
        ]
    })

    //工具条事件
    table.on('tool(model_detail)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        const data = obj.data //获得当前行数据
        const event = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        
        if (event === 'del') { //删除
            layer.confirm('真的删除该行数据么',{icon: 0, title: '提示', anim: 6}, function (index) {
                layer.close(index)
                //向服务端发送删除指令
                assit.delete('/model/detail', {modelDetailId: data.id})
                     .then(r => {
                        if (r.code === 0) {
                            layer.msg('已成功删除', {icon: 1, time: 2000})
                            obj.del() //删除对应行（tr）的DOM结构，并更新缓存
                            // table.reload('MD_TABLE')
                        }
                     })
            })
        } else if (event === 'edit') { //编辑
            // window.scrollTo({top: 0, behavior: 'smooth'})
            // form.val('model-detail-form', data)

            const newData = JSON.parse(JSON.stringify(data))
            showMDForm(event, newData)
        }
    })

    function showMDForm(event, o) {
        config.putCache('md-form-data', {entity: o, event: event});
        assit.popupCenter({
            title: event === 'edit' ? '修改模型明细' : '新增属性',
            area: '500px',
            path: '/pages/model_detail_form.html',
            finish: function () {
                table.reloadData('MD_TABLE', {})
                config.removeCache('md-form-data')
            },
        })
    }

    $('#tableConfigBtn').on('click', function () {
        // 获取表格的全部数据
        let tdata = table.cache['MD_TABLE']
        const list = tdata.map(e => {return {id: e.id, name: e.columnName}})
        config.putCache('table-config-form', list)
        assit.popupCenter({
            title: '表配置',
            path: '/pages/table_config.html',
            finish: function () {
                config.removeCache('table-config-form')
                setTimeout(_ => {
                    table.reloadData('MD_TABLE')
                }, 200)
            },
        })
    })

    $('#addPropertyBtn').on('click', function () {
        // 获取表格的全部数据
        showMDForm('add', {modelId: modelId})
    })

});

function getModelId() {
    let id = '';
    const _path = window.location.pathname;
    if (typeof _path === 'string') {
        // console.log('path: ', _path)
        id = _path.substring(_path.lastIndexOf('/') + 1)
    }
    return id
}